<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        function validate(){
            var name = $("#name").val();
            //alert(name)
            if (name == null || name == "" ) {
                $("#nameDiv").html("用户名不能为空哦");
            }else {
                // 1 创建ajax对象 XMLHttpRequest
                var xmlHttpRequest = new XMLHttpRequest();
                // 2 设置请求信息
                xmlHttpRequest.onreadystatechange = callBack;
                var url =  "ServletValidate?name=" + name ;
                // 3 打开连接
                xmlHttpRequest.open( "GET" ,url , true);
                // 4 发送
                xmlHttpRequest.send(null);

                function  callBack() {
                    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                        var data = xmlHttpRequest.responseText;
                        if (data == "success") {
                            $("#nameDiv").html("用户名可以使用");
                        }else {
                            $("#nameDiv").html("用户名已被占用");
                        }
                    }
                }


            }
        }

    </script>
</head>
<body>
<form action="">
  <table>
      <tr>
          <td>用户名：</td>
          <td><input type="text" name="name" id="name" onblur="validate();"></td>
          <td> <div id="nameDiv" style="display: inline"> </div></td>
      </tr>
  </table>
</form>


</body>
</html>